<template>
<div>
  名称：<el-input v-model="sname" placeholder="请输入用户名"></el-input>
  <el-button @click="search">搜索</el-button>
  
  <el-table :data="tableData" style="width: 600px">
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button
        >
        <el-button link type="primary" size="small" @click='show(scope.row.id)'>资源配制</el-button>
        <!-- <el-button link type="primary" size="small" @click='show(scope.row.id)'>资源继承</el-button> -->
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[1, 2, 3, 4]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

<el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="70%"
    :before-close="handleClose"
  >
    
    <el-transfer v-model="value" :data="data" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="setresource"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script lang="ts" setup>
import {ref,onMounted}  from 'vue'
import http from '../../http'
const dialogVisible = ref(false)
const handleClick = () => {
  console.log('click')
}
// 搜索用
const sname = ref('')
// 当前默认页码
const currentPage4 = ref(1)
// 每页显示条数
const pageSize4 = ref(2)
const total = ref(15)

// 定义roleid
const roleid = ref('0')

const handleSizeChange = (size) => {
  pageSize4.value = size
  // 当前页数的数据条数发生改变就刷新一次页面
  reslist()
}
const handleCurrentChange = (page) => {
  currentPage4.value = page
  // 当前页码发生改变就刷新一次页面
  reslist()
}
const search = ()=>{
  reslist()
}

interface Option {
  key: number
  label: string
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([])


const tableData = ref([])

const show=(rid)=>{
  roleid.value = rid
  http.get('roleresource/?roleid='+rid).then(res=>{
    if(res.data.code==200){
      data.value = res.data.reslist
      value.value = res.data.values
      dialogVisible.value= true
    }
  })
}
const show1=(rid)=>{
  roleid.value = rid
  http.get('roleresource/?roleid='+rid).then(res=>{
    if(res.data.code==200){
      data.value = res.data.reslist
      value.value = res.data.values
      dialogVisible.value= true
    }
  })
}
const reslist = ()=>{
  http.get('role/?sname='+sname.value+'&page_size='+pageSize4.value+'&page='+currentPage4.value).then(res=>{
    if(res.data.code==200){
      tableData.value = res.data.data
      total.value = res.data.total
    }
  })
}
const setresource = ()=>{
  http.post('roleresource/',{"roleid":roleid.value,"values":value.value}).then(res=>{
    if(res.data.code==200){
      alert('提交成功')
      dialogVisible.value = false
      roleid.value = '0'
    }else{
      alert('提交失败')
    }
  })
}
onMounted(()=>{
  reslist()
})
</script>
